<template>
  <div class="box">
    <div class="item">
      <el-row>
        <el-col :span="4">昵称</el-col>
        <el-col :span="20"
          ><el-input v-model="nickname" placeholder="请输入昵称" @blur="changeUserinfo"></el-input
        ></el-col>
      </el-row>
      <el-row>
        <el-col :span="4">个性签名</el-col>
        <el-col :span="20"
          ><el-input
            type="textarea"
            v-model="desc"
            placeholder="请输入个性签名"
            @blur="changeUserinfo"
          ></el-input
        ></el-col>
      </el-row>
      <el-row>
        <el-col :span="4">头像</el-col>
        <el-col :span="20">
          <p class="img-tip">
            <i class="iconfont icon-zhushi"
              >仅支持JPG、PNG格式，最好为正方形
            </i>
          </p>
          <el-upload
            class="avatar-uploader left"
            :action="uploadUrl"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            :headers="headers"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i> </el-upload
        ></el-col>
      </el-row>
      <el-row>
        <el-col :span="4">年龄</el-col>
        <el-col :span="20" class="left"
          ><el-input-number v-model="age" @change="changeUserinfo" :min="0" :max="200" ></el-input-number>
          </el-col>
      </el-row>
      <el-row>
        <el-col :span="4">职业</el-col>
        <el-col :span="20" class="left"
          ><el-radio-group v-model="work" @change="changeUserinfo">
            <el-radio label="医生">医生</el-radio>
            <el-radio label="学生">学生</el-radio>
            <el-radio label="家庭主妇">家庭主妇</el-radio>
            <el-radio label="其他">其他</el-radio>
          </el-radio-group></el-col
        > </el-row
      >
      <!-- <el-row>
        <el-col :span="4">工作单位</el-col>
        <el-col :span="20"
          ><el-input v-model="workpos" placeholder="请输入工作单位"></el-input
        ></el-col>
      </el-row> -->
    </div>
  </div>
</template>

<script>
import c from '../utils/constant'
export default {
  inject: ['reload'],
  data() {
    return {
      value1: "",
      imageUrl: "",
      date: "",
      age:null,
      nickname: "",
      desc: "",
      workpos: "",
      work: "",
      uploadUrl:c.uploadUrl,
      headers:{
        token:JSON.parse(sessionStorage.getItem('token'))
      }
    };
  },
  methods: {
    handleAvatarSuccess(res, file) {
      console.log(res)
      //更改头像
      this.imageUrl=res.fileName;
      this.changeUserinfo()
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    //更改用户信息
    changeUserinfo() {
      this.$axios({
        method: "post",
        url: "/user/update",
        data: this.$qs.stringify({
          nickname:this.nickname,
          headImg:this.imageUrl,
          occupation:this.work,
          age:this.age,
          personalizedSignature:this.desc,
          id: this.$getStorage("userinfo").id,
        }),
      }).then((res) => {
        console.log(res);
        if (res.code != "200") {
          this.$message.error(res.msg);
          
        } else {
          this.$message({
            message: "更改成功",
            type: "success",
          });
          // let old=this.$getStorage('userinfo')
          // console.log({...old,...res.data})
          this.reload()
          this.$setStorage('userinfo',res.data)
          this.setInfo()
        }
      });
    },
    setInfo(){
      let userinfo=this.$getStorage('userinfo')
      this.nickname=userinfo.nickname
      this.imageUrl=userinfo.headImg
      this.age=userinfo.age
      this.work=userinfo.occupation
      this.desc=userinfo.personalizedSignature
    }
  },
  mounted(){
   this.setInfo()
  }
};
</script>

<style lang="less" scoped>
.box {
  width: 100%;
  background-color: #f2f7fb;
  // overflow: hidden;

  .item {
    background-color: white;
    margin: 35px 0;
    padding: 30px 50px;
    box-sizing: border-box;
    box-shadow: 0 0 8px 5px rgba(228, 228, 228, 0.5);
    border-radius: 10px;
    & > div {
      margin: 30px 0;
      .left {
        text-align: left;
      }
      .img-tip {
        color: #999;
        margin-bottom: 20px;
        text-align: left;
      }
    }
  }
}
::v-deep .el-upload {
  border: 1px dashed #d9d9d9 !important;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>